<template>
  <div class="aedit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="950px"
        :clickModalClose="true"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <div>
        <el-form
            ref="formRef"
            :model="formData"
            label-width="110px"
            :rules="formRules"
            :inline="true"
        >
          <el-form-item label="回款金额" prop="amountCashed">
            <el-input class="w-[300px]" v-model="formData.amountCashed" placeholder="请输入回款金额"/>
          </el-form-item>
          <el-form-item label="回款时间" prop="topUrgent">
            <el-date-picker
                class="flex-1 !flex"
                v-model="formData.topUrgent" style="width: 300px"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择回款时间"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input class="w-[300px]" v-model="formData.remarks" placeholder="请输入备注"/>
          </el-form-item>
          <el-form-item label="回款类型" prop="paymentType">
            <el-select
                class="flex-1 w-[300px]"
                v-model="formData.paymentType"
                placeholder="请选择回款类型"
            >
              <el-option label="正常回款" value="1"/>
              <el-option label="退款" value="2"/>
              <el-option label="订金" value="3"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type {FormInstance} from 'element-plus'
import {answerEdit, answerAdd, answerDetail} from '@/api/answer'
import type Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type {PropType} from 'vue'
import {defineComponent} from 'vue'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑新建合同回款信息' : '新增新建合同回款计划'
})
const radio1 = ref('0')

const formData = reactive({
  id: '',
  creator: '',
  servicer: '',
  contractId: '1',
  contractName: '',
  customerName: '',
  caseName: '',
  agencyFee: '',
  contractValue: '',
  currency: '',
  paymentCurrency: '',
  officialFee: '',
  currencyid: '',
  paymentCurrencyid: '',
  remarks: '',
  topUrgent: '',
  planTopUrgent: '',
  amountCashed: '',
  paymentType: '',
  collectionAgentDate: '',
  collectingAgencyFees: '',
  collectingCompanyAccount: '',
  invoiceAmount: '',
  timeBilling: '',
  paymentMethod: '',
  consolidatedCollection: '',
  invoiceNumber: '',
  payee: '',
  collectingCompanyAccountid: ''
})

const formRules = {
  topUrgent: [
    {
      required: true,
      message: '请选择回款时间',
      trigger: ['blur']
    }
  ],
  amountCashed: [
    {
      required: true,
      message: '请输入回款金额',
      trigger: ['blur']
    }
  ],
  paymentType: [
    {
      required: true,
      message: '请选择回款类型',
      trigger: ['blur']
    }
  ],
  collectingCompanyAccount: [
    {
      required: true,
      message: '请选择收款公司账户',
      trigger: ['blur']
    }
  ],
  paymentMethod: [
    {
      required: true,
      message: '请选择付款方式',
      trigger: ['blur']
    }
  ],
  contractName: [
    {
      required: true,
      message: '请输入合同名称',
      trigger: ['blur']
    }
  ]
}

const handleSubmit = async () => {
  await formRef.value?.validate()
  const data: any = {...formData}
  mode.value == 'edit' ? await answerEdit(data) : await answerAdd(data)
  popupRef.value?.close()
  feedback.msgSuccess('操作成功')
  emit('success')
}

const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>) => {
  const data = await answerDetail({
    id: row.id
  })
  setFormData(data)
}

const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
